<template>
  <view v-show="showView"
        class="content">
    <!-- <image :style="{'top':(topheight - 26)+'px'}" class="logo" src="/static/index/yzgc_logo.png" mode="widthFix"
			v-if="isShowYZLogo">
		</image> -->
    <view :style="{'top':(topheight - 26)+'px'}"
          class="logo1"
          v-if="isShowYZLogo">
      打造您的数字分身
    </view>
    <image :style="{'top':(topheight - 26)+'px'}"
           class="logo"
           src="/static/index/lq_logo.jpg"
           mode="widthFix"
           v-else-if="isShowLQLogo">
    </image>
    <view :style="{'top':(topheight - 26)+'px'}"
          class="logo1"
          v-else>
      {{oemName}}
    </view>
    <view class="video-box">
      <video class="play"
             :object-fit="cover"
             :loop="true"
             :controls="false"
             :autoplay="true"
             v-if="isShowVideo"
             :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + bannerUrl + '.mp4'"></video>
      <image v-else-if="(!isShowVideo && oemName==='影子工厂') || (!isShowVideo && oemName=='云生数智')"
             :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + bannerUrl + '.png'"
             class="play"
             mode="">
      </image>
      <video class="play"
             :object-fit="cover"
             :loop="true"
             :controls="false"
             :autoplay="true"
             v-else-if="oemName!=='影子工厂' ||  oemName!=='云生数智'"
             src="https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/index.mp4"></video>

    </view>
    <view :class="oemName==='影子工厂' || oemName==='云生数智'?'opt-box':'opt-box1'">
      <image @click="create_video()"
             style="width: 750rpx;"
             v-if="oemName!=='影子工厂'"
             :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + btn1 + '.png'"
             mode="widthFix">
      </image>
      <view class="zl-flex zl-row-around">
        <image @click="clonePeople()"
               style="width: 210rpx;"
               :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + btn2 + '.png'"
               mode="widthFix">
        </image>
        <image @click="cloneVoice()"
               style="width: 210rpx;"
               :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + btn3 + '.png'"
               mode="widthFix">
        </image>
        <image @click="create_AIList()"
               style="width: 210rpx;"
               :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + btn4 + '.png'"
               mode="widthFix">
        </image>
      </view>
      <image @click="create_video()"
             style="width: 750rpx;"
             v-if="oemName==='影子工厂'"
             :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + btn1 + '.png'"
             mode="widthFix">
      </image>
      <view class="notice_box zl-flex zl-row-center"
            v-if="isShowurl">
        <view class="noticetips"> 电脑端已上线，在电脑上也可以操作啦~ </view>
        <view class="copy_box"
              @click="copy"> 复制链接 </view>
      </view>
    </view>

    <uni-popup ref="aiPopup"
               type="bottom"
               background-color="#fff"
               border-radius="20rpx 20rpx 0rpx 0rpx">
      <view class="name_box zl-flex zl-col-between">
        <view class="title zl-width-100 zl-flex zl-col-between">
          <text class="zl-font-36 zl-font-500"
                style="color: #131415;">请选择类型</text>
        </view>
        <view class="name_line"
              @click="$refs.aiPopup.close()">
          <image src="/static/icon/pop_close.png"
                 style="width: 29rpx;height: 29rpx;margin-right: 20rpx;"></image>
        </view>
      </view>
      <view class=" zl-flex-col zl-col-center zl-m-t-40">
        <view class="zl-flex aiBtn zl-m-b-20 zl-row-between"
              @click="toAi(false)">
          <view class="zl-flex zl-col-center">
            <image src="/static/index/jiaoben.png"
                   style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"></image>
            <text>智能脚本</text>
          </view>
          <image src="/static/icon/to_right.png"
                 style="width: 13rpx;height: 26rpx;"></image>
        </view>
        <view class="zl-flex aiBtn zl-row-between "
              @click="toAi(true)">
          <view class="zl-flex zl-col-center">
            <image src="/static/index/wenda.png"
                   style="width: 36rpx;height: 36rpx;margin-right: 20rpx"></image>
            <text>AI问答</text>
          </view>
          <image src="/static/icon/to_right.png"
                 style="width: 13rpx;height: 26rpx;"></image>
        </view>
      </view>
    </uni-popup>

    <uni-popup :animation="false"
               ref="popup"
               type="center"
               background-color="#fff"
               border-radius="20rpx 20rpx 20rpx 20rpx"
               :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <image style="width: 300rpx;"
               src="/static/clone/VIP_pass.png"
               mode="widthFix"></image>
        <view class="zl-color-000 zl-font-40 zl-font-500 zl-m-t-18"> 您不是VIP会员！ </view>
        <view class="zl-color-666 zl-font-24 zl-m-t-30"> 您暂时没有相关功能的操作权限，请开通VIP后再使用相关功能！ </view>
        <view @click="renew()"
              class="btn zl-m-t-66 surebtn"> 卡密激活VIP会员 </view>
        <view class="btn zl-m-t-32 cancelbtn"
              @click="$refs.popup.close()"> 关闭 </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup2"
               type="dialog">
      <uni-popup-dialog ref="inputClose"
                        mode="input"
                        title="卡密激活"
                        v-model="cdkey"
                        placeholder="请输入卡密"
                        @confirm="submitCdkey"></uni-popup-dialog>
    </uni-popup>
    <uni-popup :animation="false"
               ref="popup3"
               type="center"
               background-color="#fff"
               border-radius="20rpx 20rpx 20rpx 20rpx"
               :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <image style="width: 120rpx;"
               src="/static/icon/fail.png"
               mode="widthFix"></image>
        <view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-36">暂无法创作视频！</view>
        <view class="zl-color-666 zl-font-24 zl-m-t-40"> 系统检测到您未完成
          <text style="color: #EB5E00;">形象克隆</text>
          请先完成克隆再来创作数字分身视频！
        </view>
        <view @click="clonePeople()"
              class="btn zl-m-t-66 zl-theme-btn">前往形象克隆 </view>
        <!-- <view class="btn zl-m-t-32 zl-theme-btn" @click="cloneVoice()"> 前往声音克隆 </view> -->
      </view>
      <image @click="$refs.popup3.close()"
             style="width: 80rpx;margin-top: 70rpx;margin-left: 260rpx;"
             src="/static/icon/close-w.png"
             mode="widthFix"></image>
    </uni-popup>
    <PrivacyPoup></PrivacyPoup>
  </view>
</template>
<script>
import PrivacyPoup from '@/components/PrivacyPoup.vue';
export default {
  components: {
    PrivacyPoup,
  },
  data () {
    return {
      isShowurl: getApp().globalData.isShowurl,
      bannerUrl: getApp().globalData.bannerUrl,
      isShowVideo: getApp().globalData.isShowVideo,
      isShowYZLogo: getApp().globalData.isShowYZLogo,
      isShowLQLogo: getApp().globalData.isShowLQLogo,
      oemName: getApp().globalData.oemName,
      btn1: getApp().globalData.btn1,
      btn2: getApp().globalData.btn2,
      btn3: getApp().globalData.btn3,
      btn4: getApp().globalData.btn4,
      topheight: '',
      menuButtonHeight: '',
      titleBarHeight: '',
      balanceInfo: {
        "userId": 0,
        "digitalCount": 0,
        "maxDigitalCount": 0,
        "voiceCount": 0,
        "maxVoiceCount": 0,
        "produceCount": 0,
        "maxProduceCount": 0,
        "endTime": 0
      },
      showView: false,
      cdkey: '',
      voiceCount: 0,
      peopleCount: 0
    }
  },
  onShareAppMessage (res) {
    return {
      title: getApp().globalData.shareTitle,
      imageUrl: '/static/index/share.png',
      path: '/pages/index/index',
    };
  },
  async onLoad () {
    await this.$onLaunched;
    getApp().globalData.isReload = false
    this.topheight = getApp().globalData.topBarHeight;
    this.menuButtonHeight = getApp().globalData.menuButtonHeight;
    this.titleBarHeight = getApp().globalData.titleBarHeight
  },
  async onShow () {
    await this.$onLaunched;
    this.getassetamount();
  },
  methods: {
    copy () {
      const url = getApp().globalData.url
      this.$util.copy(url)
    },
    // 获取账号资源总计
    getassetamount () {
      this.api.account.getassetamount().then(res => {
        if (res.code === 0) {
          this.balanceInfo = res.data;
          this.showView = true
        } else {
          this.$util.msg(res.msg);
          this.showView = true
        }
      }).catch(err => {
        this.$util.msg(err);
        // this.$util.msg('请检查网络连接！');
      })
    },
    getvoicemodellist () {
      return new Promise((resolve, reject) => {
        this.api.clone.getvoicemodellist({
          page: 1,
          limit: 1,
          status: 0
        }).then(res => {
          if (res.code === 0) {
            resolve(res.data.total);
          } else {
            // this.$util.msg(res.msg);
            resolve(0)
          }
        }).catch(err => {
          // this.$util.msg(res.msg);
          resolve(1)
        })
      })
    },
    getdigitalmodellist () {
      return new Promise((resolve, reject) => {
        this.api.clone.getdigitalmodellist({
          page: 1,
          limit: 1,
          status: 0
        }).then(res => {
          if (res.code === 0) {
            resolve(res.data.total);
          } else {
            // this.$util.msg(res.msg);
            resolve(0)
          }
        }).catch(err => {
          // this.$util.msg(res.msg);
          resolve(1)
        })
      })
    },
    //形象克隆
    clonePeople () {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.digitalCount <= 0 && this.balanceInfo.digitalCount !== -99999999) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      this.$refs.popup3.close()
      uni.navigateTo({
        url: '/pages/clone/people'
      })
    },
    //声音克隆
    cloneVoice () {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.voiceCount <= 0 && this.balanceInfo.voiceCount !== -99999999) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      this.$refs.popup3.close()
      uni.navigateTo({
        url: '/pages/clone/voice'
      })
    },
    //创建数字人视频
    async create_video () {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.produceCount <= 0) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      // this.voiceCount = await this.getvoicemodellist();
      this.peopleCount = await this.getdigitalmodellist();
      if (this.peopleCount <= 0) {
        this.$refs.popup3.open()
        return
      }
      uni.navigateTo({
        url: '/pages/create/video'
      })
    },
    create_voice () {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      uni.navigateTo({
        url: '/pages/create/voice'
      })
    },
    //智能脚本
    create_AIList () {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      this.$refs.aiPopup.open()
      // uni.navigateTo({
      //   url: '/pages/create/addAI'
      // })
    },
    toAi (flag) {
      if (flag) {
        uni.navigateTo({
          url: '/pages/ai_chat/ai_chat'
        })
      } else {
        uni.navigateTo({
          url: '/pages/create/addAI'
        })
      }
      this.$refs.aiPopup.close()
    },
    // 续费
    renew () {
      this.cdkey = '';
      this.$refs.popup2.open()
    },
    // 激活卡密
    submitCdkey () {
      // 激活卡密
      if (!this.cdkey) {
        this.$util.msg('请输入店铺激活码！');
        return;
      }
      this.api.account.usecdkey({
        cdkey: this.cdkey,
      }).then(res => {
        if (res.code === 0) {
          this.$refs.popup.close();
          this.$refs.popup2.close()
          this.cdkey = '';
          this.$util.msg(res.msg);
          this.getassetamount()
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.name_box {
  width: 750rpx;
  margin: 0 auto;
  padding: 0 30rpx;
  border-bottom: 1px solid #ddd;

  .title {
    height: 120rpx;

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
.logo1 {
  position: absolute;
  top: 0;
  left: 42rpx;
  width: 353rpx;
  color: #fff;
  font-weight: 700;
  transform: skew(-10deg);
}

.logo {
  position: absolute;
  top: 0;
  left: 42rpx;
  width: 213rpx;
}

.tip-box {
  position: relative;
  width: 600rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 38rpx 60rpx 68rpx;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400rpx;
  height: 88rpx;
  border-radius: 44rpx;
}

.surebtn {
  background: #000;
  font-weight: 600;
  font-size: 28rpx;
  color: #fff;
}

.cancelbtn {
  background: #eeeeee;
  font-weight: 600;
  font-size: 28rpx;
  color: #000;
}

.video-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;

  .play {
    width: 100vw;
    height: 1624rpx;
    z-index: -3;
  }
}

.opt-box {
  position: absolute;
  top: 890rpx;
  // top: 970rpx;
  // top: 890rpx;
  left: 0;
  width: 100%;
}

.opt-box1 {
  position: absolute;
  top: 950rpx;
  // top: 970rpx;
  // top: 890rpx;
  left: 0;
  width: 100%;
}

.notice_box {
  height: 70rpx;

  .noticeIcon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .noticetips {
    font-size: 24rpx;
    color: #ffdc00;
  }

  .copy_box {
    width: 128rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 32rpx;
    border: 2rpx solid #fadd02;
    text-align: center;
    font-size: 22rpx;
    color: #ffdc00;
    margin-left: 10rpx;
  }
}

.aiBtn {
  width: 690rpx;
  height: 130rpx;
  background-color: #eeeeee;
  padding: 25rpx;
  border-radius: 30rpx;
  font-size: 32rpx;
}
</style>